<template>
  <div class="job">
    <van-notify id="van-notify" />
    <fuChuang></fuChuang>
    <div v-if="userinfoShow">
      <shouQuan @userinfoChange="getchilduserinfo(arguments)"></shouQuan>
    </div>
    <van-button round type="info" plain hairline size="mini"  class="choose" @click="locationShow=true">
      <van-icon name="location-o" />
      <span>{{locationContent}}</span>
    </van-button>
    <van-button round type="info" plain hairline size="mini" class="choose" @click="timeShow=true">
      <van-icon name="clock-o" />
      <span>{{timeContent}}</span>
    </van-button>
    <van-divider  hairline class="divider-1"/>
    <van-tabs :active="index" @change="onChange" class="tabs" nav-class="nav-tabs" tab-active-class="nav-active">
      <van-tab title="推荐" class="tab">
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
      </van-tab>
      <van-tab title="最新" class="tab">
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
      </van-tab>
      <van-tab title="综合" class="tab">
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
        <van-card >
          <div slot="thumb" class="thumb">
            <van-image fit="cover" width="200rpx" height="200rpx"      src="/static/images/icon.jpg"></van-image>
          </div>
          <div slot="tags" class="tags">
            <span>好评率：90%</span>
            <van-rate value= 4.5 allow-half="true"	 count= 5 readonly="true"></van-rate>
          </div>
          <!--        <div slot="footer" class="footer">-->
          <!--          <div>2019年2月1日</div>-->
          <!--        </div>-->
          <div slot="desc" class="desc">
            <div>快递公司：顺丰快递</div>
          </div>
          <div slot="title" class="title">
            <span class="title-1">商品标题：abcdefghijk</span>
            <span class="price">5-10/时</span>
          </div>
          <div slot="bottom" class="bottom">
            <van-icon name="/static/images/icon/position.png"></van-icon>
            <span>成信大</span>
            <span class="time">2019年2月1日</span>
          </div>

        </van-card>
      </van-tab>
    </van-tabs>
    <van-popup :show="locationShow" @close="onClose" position="bottom">
        <van-picker show-toolbar title="请选择位置" :columns="locationArray"  @change="locationChange" @cancel="locationCancel" @confirm="locationConfirm"/>
    </van-popup>
    <van-popup :show="timeShow" @close="onClose" position="bottom" :overlay="true">
      <van-picker show-toolbar title="请选择位置" :columns="timeArray"  @change="timeChange" @cancel="timeCancel" @confirm="timeConfirm"/>
    </van-popup>
  </div>
</template>

<script>
  import shouQuan from '../../components/shouQuan/shouQuan.vue'
  import fuChuang from '../../components/fuChuang/fuChuang.vue'
  import Notify from '@/../static/vant/notify/notify'
  // const card = {
  //   "本科生": ["大一", "大二", "大三", "大四"],
  //   "研究生": []
  // };

  // const time={
  //   "周一":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周二":["9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周三":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周四":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周五":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周六":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"],
  //   "周日":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00","18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"]
  // };
const time={
  "周一":["上午","下午","晚上"],
  "周二":["上午","下午","晚上"],
  "周三":["上午","下午","晚上"],
  "周四":["上午","下午","晚上"],
  "周五":["上午","下午","晚上"],
  "周六":["上午","下午","晚上"],
  "周日":["上午","下午","晚上"]
}
const day={
  "上午":["8:00-9:00","9:00-10:00","10:00-11:00","11:00-12:00"],
  "下午":["12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00"],
  "晚上":["18:00-19:00","19:00-20:00","20:00-21:00","21:00-22:00","22:00-23:00"]
}
var a="时间"
// let location3="上午"
export default {
  components: {
    shouQuan,
    fuChuang
  },
  data () {
    return {
      userinfo: {},
      userinfoShow: false,
        index: 0,
      locationArray: [],
      locationShow: false,
      locationContent: "地区",
    //   timeArray: [
    //   {
    //     values: Object.keys(time),
    //     className: "column1"
    //   },
    //     {
    //       values: time["周一"],
    //       className: "column2",
    //       defaultIndex: 1
    //     }
    // ],
    //   timeShow: false,
    //   timeContent: "地区",
      timeShow: false,
      timeContent: a,
      timeArray: [
        {
          values: Object.keys(time),
          className: "column1"
        },
        {
          values: Object.keys(day),
          className: "column2",
          defaultIndex: 1
        },
        {
          values: day["上午"],
          className: "column3",
          defaultIndex: 1
        }
      ]
      }
    },
  onShow(){
    /*获取地区数据*/
    // console.log(1)

    var that = this;
    wx.request({
      url: 'http://47.107.120.160/HeiJob/school/get/allname', //仅为示例，并非真实的接口地址
      data: {
        id: 1
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        // console.log(res.data.message)
        if(res.data.message == "success"){

          res.data.data.schoolname.forEach( function(item){
            that.locationArray.push(item)
          } )
          console.log(res.data.data.schoolname)
        }else {
          // var a = "1111"
          Notify({
            message: '获取大学名称失败，稍后再试~',
            // message: a,
            type: 'warning',
            duration: 1500,
          });


        }
      },
      fail(){
        console.log("失败")
      }
    })
    // console.log(2)
    const userinfo = wx.getStorageSync("userinfo")
    if(userinfo){
      console.log(userinfo)
      this.userinfo = userinfo
      this.userinfoShow = false
      console.log("userinfo")
    }else{
      this.userinfoShow = true
      console.log('userinfoShow')
    }
  },
  methods: {
    getchilduserinfo(argu){
      this.userinfoShow= argu[0]
    },
    locationChange (event) {
      //event.target.picker.getIndexes.log
      //event.target.picker.setColumnValues(1, card[event.target.picker.getValues()[0]])
      this.locationContent = event.target.value
    },
    locationCancel(){
      this.locationShow = false
    },
    // locationConfirm(){
    //   this.locationShow = false
    // },
    // timeChange (event) {
    //   console.log(event.target.picker.getValues())
    //   // console.log(values)
    //   // console.log(time[event.target.picker.getValues()[0]][event.target.picker.getValues()[1]])
    //   //event.target.picker.setColumnValues(1, time[event.target.picker.getValues()[0]])
    //   event.target.picker.setColumnValues(1, time[event.target.picker.getValues()[0]])
    //event.target.picker.setColumnValues(1, time[event.target.picker.getValues()[0]])
    //   console.log(event.target.picker.getValues(1))
    //   // console.log(event.target)
    //   this.timeContent = event.target.value
    // },
    // timeCancel(){
    //
    //   this.timeShow = false
    // },
    // timeConfirm(){
    //   this.timeShow = false
    // },
    // card(){
    //   this.cardShow = true
    // },
    timeChange (event) {
      // console.log(citys["福建"])
      // console.log()
      event.target.picker.setColumnValues(2, day[event.target.picker.getValues()[1]])
      var timeContent = event.target.picker.getValues()[0]+" "+ event.target.picker.getValues()[1]+ " "+event.target.picker.getValues()[2]
      //this.cardContent = event.target.value[0] + event.target.value[1]
      a=timeContent
      console.log(a)

    },
    timeCancel(){
      this.timeShow = false
    },
    timeConfirm(){
      this.timeShow = false
    }
  }
  }



</script>

<style lang="stylus" rel="stylesheet/stylus">
.job
  .choose
    border-radius 30rpx
    display inline-block
    margin-top 30rpx
    margin-left 25rpx
    span
      display inline-block
      margin-left 11rpx
  .divider-1
    margin-top 0
  .nav-tabs
    height 100rpx
    width 430rpx
    float right
  .nav-active
    background-color rgb(199, 199, 199)
  .tabs
    .tab
      van-card
        width 100%
        height 200rpx
        border-bottom 1rpx solid rgb(235, 237, 240)
        margin-bottom 5rpx
        .title
          .title-1
            font-weight bold
          .price
            display inline-block
            float right
        .desc
          display block
          width 100%
          height 40rpx
          margin-top 10rpx
        .bottom
          display block
          width 100%
          margin-top 10rpx
          height 40rpx
          line-height 40rpx
          van-icon
            display inline-block
            line-height 40rpx
          .time
            display inline-block
            float right
            line-height 40rpx

            height 40rpx
        .tags
          display: inline-block
          margin-bottom 5rpx
          height 50rpx
          span
            font-size 30rpx
            display inline-block
            height 60rpx
            line-height 60rpx
            margin-right 30rpx
            margin-bottom  5rpx
          van-rate
            display inline-block
            height 60rpx
            line-height 60rpx

</style>
